<!DOCTYPE html>
<!--声明 Thymeleaf 的命名空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
</head>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap-theme.css">
<!-- 引入jquery的js -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>
<!-- 引入树的相关的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.js"></script>
<!-- 引入选项卡的相关的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.css">
<script type="text/javascript" src="../js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
<!-- 引入bootbox弹框的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
<!-- 引入bootbox上传图片 的css -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/bootstrap/bootstrap-fileinput/css/fileinput.css"></link>
<!-- 引入bootbox上传图片 的js -->
<script type="text/javascript" src="<%=request.getContextPath() %>/js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>

<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <a class="navbar-brand" href="http://localhost:8084/movie/homepage" target=\"view_window\">买票票</a>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="javascript:myCenter()" >个人中心</a></li>
            <li><a href="javascript:logout()">注销</a></li>
        </ul>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div id="myTree"></div>
        </div>
        <div class="col-md-10">
            <!-- 选项卡 -->
            <div id="myTabs">
                <!-- 新选项卡 -->
                <ul class="nav nav-tabs" id="tablist">
                    <li role="presentation" class="active">
                        <a href="#home" role="tab" data-toggle="tab">近期收入额</a>
                    </li>
                </ul>
                <!-- 选项卡下内容 -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <!--echar 报表-->
                        <div id="main" style="width:800px; height: 300px;margin:0px auto;"></div>
                        <div id="main2" style="width:500px; height: 500px;margin:0px auto;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function(){
        findTree();
        eCharByOrder(); // 查询 数据库 做echar 订单总金额
    })
    function findTree(){
        $.ajax({
            url:"/sec/findTree",
            success:function(data){
                $('#myTree').treeview({
                    data:data,
                    onNodeSelected:function(event, node) {
                        //添加选项卡
                        $.addtabs({iframeHeight: 800});
                        $.addtabs.add({
                            id:node.id,
                            title:node.text,
                            url:node.href
                        });
                    }
                })
            }
        });
    }
    //注销
    logout=function () {
        location.href="/sec/logout";
    }



    //个人中心
    var res;
    function createAddContent(url){
        $.ajax({
            url:url,
            async:false,//同步
            success:function(data){
                res = data;
            }
        });
        return res;
    }
    //个人中心
    myCenter=function () {


        var ids=[[${session.user.cinemaId}]];
        bootbox.dialog({
            title:'个人中心',
            message: createAddContent("/myCenter"),
            closeButton: true,
            async:false,
            buttons : {
                "success" : {
                    "label" : "<i class='icon-ok'></i> 保存",
                    "className" : "btn-sm btn-success",
                    "callback" : function() {//回调函数
                        //提交表单
                        $.ajax({
                            url:"/sec/addCinema",
                            type:'post',
                            data:$("#addForm").serialize(),//表单序列化
                            success:function(data){
                                //刷新表格
                                $('#myTable').bootstrapTable('refresh');
                            }
                        });
                    }
                },
                "cancel" : {
                    "label" : "<i class='icon-info'></i> 取消",
                    "className" : "btn-sm btn-danger"
                }
            }

        });

        $.ajax({
            url:"/sec/cinemaQuery",
            data:{ids:ids},
            anysc:false,
            success:function(data){
                findcityId(data.cityId);
                $("#cinemaId").val(data.cinemaId);
                $("#cinema").val(data.cinema);
                $("#phone").val(data.phone);
                $("#cityId").val(data.cityId);
                $("#countyId").val(data.countyId);
                $("#cinemaSite").val(data.cinemaSite);


            }
        });
        queryCity();
    }

    // 查询 数据库 做echar 订单总金额
    function eCharByOrder(){
        var dateseven = datatime(6);
        var cc = dateseven + "";
        $.ajax({
            url:"/lzyMovie/eCharByOrder",
            data:{dateseven:cc},
            success:function(datasum){
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                var str = "<font color='red'>近期订单数</font>"
                option = {
                    title: {
                        text:'近期订单数'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['当天订单数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        data: dateseven
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '当天订单数',
                            type: 'line',
                            stack: '总量',
                            data: datasum.orderCount
                        }
                    ]
                };
                option && myChart.setOption(option);
                // 圆形图
                var chartDom2 = document.getElementById('main2');
                var myChart2 = echarts.init(chartDom2);
                var option2;
                option2 = {
                    title: {
                        text: '近期收入额',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '当天收入额',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: datasum.orderSum[0], name: dateseven[0]},
                                {value: datasum.orderSum[1], name: dateseven[1]},
                                {value: datasum.orderSum[2], name: dateseven[2]},
                                {value: datasum.orderSum[3], name: dateseven[3]},
                                {value: datasum.orderSum[4], name: dateseven[4]},
                                {value: datasum.orderSum[5], name: dateseven[5]},
                                {value: datasum.orderSum[6], name: dateseven[6]},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                option2 && myChart2.setOption(option2);
            }
        })
    }
    // 最近 几天 日期 的 函数
    function datatime(time){
        var myDate = new Date(); //获取今天日期
        myDate.setDate(myDate.getDate() - time);
        var dateArray = [];
        var dateTemp;
        var flag = 1;
        for (var i = 0; i < time + 1; i++) {
            let month = 0;
            if (myDate.getMonth() + 1 < 10) {
                month = '0' + (myDate.getMonth() + 1);
            } else {
                month = myDate.getMonth() + 1;
            }
            let day = 0;
            if (myDate.getDate() < 10) {
                day = '0' + myDate.getDate();
            } else {
                day = myDate.getDate();
            }
            dateTemp = myDate.getFullYear() + '-' + month + '-' + day;
            dateArray.push(dateTemp);
            myDate.setDate(myDate.getDate() + flag);
        }
        return dateArray
    }


    /* 选择一级分类 */
    function queryCity(){
        $.ajax({
            url:"/sec/queryCity",
            type:'get',
            data:{pid:0},//pid:0
            async:false,//同步
            success:function(data){
                //动态拼接下拉列表
                var str = "<option value='-1'>请选择</option>";
                for(var i=0;i<data.length;i++){
                    str+="<option value='"+data[i].addressId+"'>"+data[i].addressName+"</option>";
                }
                $("#cityId").html(str);
            }
        });
    }



    /* 选择二级分类 */
    function findcityId(ids){
        $.ajax({
            url:"/sec/queryCity",
            type:'get',
            data:{pid:ids},
            async:false,//同步
            success:function(data){
                //动态拼接下拉列表
                var str = "<option value='-1'>请选择</option>";
                for(var i=0;i<data.length;i++){
                    str+="<option value='"+data[i].addressId+"'>"+data[i].addressName+"</option>";
                }
                $("#countyId").html(str);
            }
        });
    }
</script>
</html>